<template>
  <div v-if="searchList.list.length == 0" class="w-2xl">
    <el-skeleton :rows="10" animated/>
  </div>
  <el-row v-else>
    <el-col :span="24">
      <el-table :data="searchList.list" style="width: 100%" stripe>
        <el-table-column type="index" label="序号" />
        <el-table-column prop="vodName" label="片名" width="240px"/>
        <el-table-column prop="vodType" label="类型" width="180px"/>
        <el-table-column label="操作" width="180px">
        <template #default="scope">
          <el-button size="mini" type="primary" @click="getActiveVod(scope.row)">
            播放
          </el-button>
          <!-- <el-button size="mini" type="success" @click="setCollect(scope.row)">
            收藏
          </el-button> -->
        </template>
      </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>


<script setup lang="ts">
import { onMounted, ref, Ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { storeToRefs } from 'pinia'
import { useMovieStore } from '@/store/index'
import { useId } from '@/hooks/useId'
import { ElMessage } from 'element-plus';

// hook
const { getId, delId } = useId();
// store
const movieStore = useMovieStore()
// router
const router = useRouter()
const route = useRoute()
const { webName, webUrl, prefix, suffix } = storeToRefs(movieStore)

const getSearch = window.getSearch

// 搜索输入
const input: Ref = ref('生活大爆炸')

// 视频搜索列表
const searchList: Ref = ref({
  list: [],
  name: ''
})

// 按钮防抖
const btnLoading: Ref = ref(false)

// 搜索ID
const searchId: Ref = ref('')

onMounted(() => {
  searchList.value = {
    name: "生活大爆炸",
    list: [
        // {
        //     "_id": "6rShTpRVdDe2ZJVZjL5omJ",
        //     "vodName": "小谢尔顿第五季 更新至07集",
        //     "vodUrl": "/index.php/vod/detail/id/58281.html",
        //     "vodType": "美国剧",
        //     "vodDate": "2021-11-20 11:43:43"
        // },
        // {
        //     "_id": "6U7vFbX2L2jNCbWC3F32ZZ",
        //     "vodName": "生活大爆炸 第九季 23集全",
        //     "vodUrl": "/index.php/vod/detail/id/30110.html",
        //     "vodType": "美国剧",
        //     "vodDate": "2020-10-01 02:06:03"
        // },
    ],
    _id: "qucaKCS4Zxkzmeb4wMciww",
    _rev: "1-9ba9dffef458235bd0d379387c9715c6"
  }
  input.value = route.query?.input || ''
  Search()
})

watch(route, (newValue, oldValue) => { //直接监听
	console.log("route 改变了", route.query?.input);
  input.value = route.query?.input || ''
  if (input.value && input.value != undefined && input.value != '') {
    Search()
  }
});

// 搜索
const Search = () => {
  // console.log('input', input.value)
  // console.log(webUrl.value)
  // console.log(prefix.value)
  // console.log(suffix.value)
  let url = prefix.value + encodeURIComponent(input.value) + suffix.value
  console.log(url)
  searchId.value = getSearch({
    url,
    source: webName.value,
    name: input.value
  })
  console.log(searchId.value);
  getSearchList(searchId.value)
}


// 获取视频列表
const getSearchList = async (id: string) => {
  console.log('获取视频列表', id)
  let res: any = await getId(id)
  console.log('res', res)
  if (res && res._id) {
    console.log('获取id 信息',res)
    searchList.value = res
  } else {
    console.log('获取不到 id 信息')
    delId(id)
  }
}

// 2. 获取点击的那个
const getActiveVod = (item: any) => {
  console.log('获取点击的那个 item', item)
  console.log('route', route);
  console.log('searchList.value', searchList.value);
  router.push({
    name: 'detail',
    query: {
      ...item,
      id: searchList.value._id
    },
  })
}

// 收藏
const setCollect = (item: any) => {
  console.log('收藏', item);
}

</script>

<style>

</style>
